<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>

    <style type="text/css">
        body{
            margin:0%;
            background-image: url("IMG/p1.jpg");
            background-size:100%;
        }

        #div_z{
            margin:0 ;
            text-align: center;
            background-color: rgba(243, 246, 248, 0.2);
            margin-top: 10%;
            margin-left: 70%;
            width: 20%;
            height: auto;
            border-radius: 19px;
            padding:10px 0px;
        }

    </style>
</head>
<body id="bod">
        <div id="div_z">


            <form  action="" method="post" >
                <h1 style="color: rgb(255, 102, 0);">LOGIN</h1>

                <div>
                <b style="color: #75fdfd;">账号&nbsp;&nbsp;&nbsp;&nbsp;</b>  <input v-model="user.userAccount" type="text" name="username" style="border-radius: 15px; border-color:rgb(115, 0, 255) ;">
                </div>
                <br>
                <br>

                <div>
                <b style="color: rgb(115, 0, 255);">密码&nbsp;&nbsp;&nbsp;&nbsp;</b>  <input  v-model="user.userPassword" type="password" name="password" style="border-radius: 15px; border-color: aqua;">
                </div>
                <br>
                <br>

                <div>
                    <input type="button" @click="submitForm" style="color: rgb(250, 16, 160);border-radius: 19px; width: 30%; height: auto; font-size:15px;"  value="提交">
                </div>
                <div>
                    <h5 style="color:rgb(255, 29, 21);">没有账号？ <a href="#" style="color: rgb(10, 6, 1);">注册</a></h5>
                </div>
            </form>
        </div>

        <script src="js/vue.js"></script>
        <script src="js/axios-0.18.0.js"></script>
        <script>

            new Vue({
                el:"#div_z",
                data(){
                    return{
                        user:{}
                    }
                },
                methods:{
                    submitForm()
                    {
                        var _this = this;
                        axios({
                            method:"post",
                            url:"http://localhost:8080/demo_war/user_Login",
                            data:_this.user

                        }).then(function (resp) {
                            if(resp.data == "yes")
                            {
                                location.href="http://localhost:8080/demo_war/home.html"
                            }else{
                                //显示登录失败
                                alert("账号或密码错误")
                            }
                        })
                    }
                }

            })

            setInterval(function () {
                var arr=['IMG/p1.jpg',
                    'IMG/p2.jpg',
                    'IMG/p3.png',
                    'IMG/p4.png',
                    'IMG/p5.jpg',
                    'IMG/p6.jpg'
                    ]
                var images=arr[parseInt(Math.random()*arr.length)]

                document.getElementById("bod").style.backgroundImage="url("+images+")";
            },3000)
        </script>
</body>

</html>